<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="../css/MyCss.css" />
  <style>
	*{margin: 0; padding: 0;}
	
	.select-address {overflow: hidden; padding: 6px 20px; overflow-x: auto;}
	.select-address > div {overflow: hidden;}
	.select-address > div > label {display: block; overflow: hidden;}
	.select-address > div > label > .select-input {background: #f6f4f0; float: left;}
	.select-address > div > label > .add-address-bt {width: 85px; height: 30px; float: left; }
	.select-address > div > label > .address-bt {display: block; margin: auto; text-align: center; width: 100px; cursor: pointer;}
	.select-address > div > label > .address-bt:hover {color: #fff;}
	.select-address > div > label > ul li {background: #f6f4f0; overflow: hidden;}
	.select-address > div > label > ul li label {display: block; float: left;}
	.select-address > div > label > ul li label:nth-child(2) {width: 350px; height: 28px; line-height: 28px; color: #ccc;}
	.select-address > div > label > ul li input {margin: 8px;}
	.select-address > div > label:nth-child(2) {background: gray; color: #ccc;}

	.order-list {padding: 0px 38px; overflow: hidden;}

	.button-cnt > div {margin-right: 20px; float: right; margin-top: 10px;}
	
	/* item */
	.car_con, .colle_con, .foot_con {padding:10px 80px;}  /*收藏 */
	.lictn{height:60px; border-bottom:1px solid rgba(204, 207, 208, 0.26); padding:2px; background:#fff; cursor:pointer; overflow:hidden; width: 648px;}
	.lictn label{display:block;}
	.goodspho{width:60px; height:60px; float:left;}
	.goodspho img{display:block; cursor:pointer;}

	.goodsdes{float:left; height:60px; margin:0 5px;}
	.goodsdes label {line-height:80px;}

	.goods-infor font:nth-child(1) {font-weight:bold; color:red;}
	.goods-infor font:nth-child(2) {font-size:16px; font-family: sans-serif;font-style: normal;}
	.goods-name, .goods-size, .goods-num, .goods-color, .goods-price, .foot-time {text-align:center; float:left; color:#756e6e; font-size:12px;font-family: serif;} 
	.goods-name {width:180px;}
	.goods-color {width:80px;}
	.goods-num, .goods-size{width: 80px;}
	.goods-price {width:100px;}
	.foot-time {width:120px;}
	.colle-bt, .operate {overflow:hidden;}
	.colle-bt img {margin:28px 80px; display:block; cursor:pointer; float:right;}
	.operate img{margin:28px 40px; display:block; cursor:pointer; float:right;}

	.button-cnt {overflow: hidden; padding: 10px;}
	.button-cnt > div > label {line-height: 30px; color: #555;}
	.button-cnt > div > .input-button {height: 30px;}
  </style>
 </head>
 <body>
	<!--
	address:[{}]
	orderItem:[{}]
	maney:
	-->
	<div class="" style="width: 1000px; overflow: hidden; border: 1px solid #e6e6e6; margin: auto;">
		<!--选择地址-->
		<div class="select-address">
			<div class="address-cnt">
				<!--已有地址容器-->
				<label class="addreedCnt">
					<!--
					<select class="select-input">
						<option>
							广州
						</option>
					</select>
					<input type="button" class="input-button add-address-bt" value="添加新地址" />
					-->
					<ul class="nolist">
						
					</ul>
					<input type="button" class="input-button add-address-bt" style="float:right; height: 20px; margin: 4px;" value="添加新地址" />
				</label>
				<!--伸展按钮条-->
				<label>
					<a class="address-bt">
						<!--
						查看地址信息
						height - 29
						-->
						请选择地址信息
					</a>
				</label>
			</div>
		</div>
		<!--清单-->
		<div class="order-list">
			<ul class="nolist">
				<!--商品id而不是购物车项id-->
				<!--
				<li data-id="">
					<div class="lictn">
						<label class="goodspho">
							<img src='E:/tako/tako.jpg' width="55" height="60" />
						</label>
						<label class="goodsdes">
							<label class="goods-infor">
								<label class = "goods-name">黑白条纹打底衫</label>
								<label class="goods-color">粉色</label>
								<label class="goods-num">2</label>
								<label class="goods-size">XXL</label>
								<label class="goods-price">220</label>
							</label>
						</label>
					</div>
				</li>
				<li>
					<div class="lictn" data-id="">
						<label class="goodspho">
							<img src='E:/tako/tako.jpg' width="55" height="60" />
						</label>
						<label class="goodsdes">
							<label class="goods-infor">
								<label class = "goods-name">黑白条纹打底衫</label>
								<label class="goods-color">粉色</label>
								<label class="goods-num">2</label>
								<label class="goods-size">XL</label>
								<label class="goods-price">320</label>
							</label>
						</label>
					</div>
				</li>
				<li>
					<div class="lictn" data-id="">
						<label class="goodspho">
							<img src='E:/tako/tako.jpg' width="55" height="60" />
						</label>
						<label class="goodsdes">
							<label class="goods-infor">
								<label class = "goods-name">黑白条纹打底衫</label>
								<label class="goods-color">粉色</label>
								<label class="goods-num">2</label>
								<label class="goods-size">L</label>
								<label class="goods-price">120</label>
							</label>
						</label>
					</div>
				</li>
				-->
			</ul>
		</div>
		<!--取消，提交按钮-->
		<div class="button-cnt">
			<div>
				<input type="button" class="reset input-button" value="取消订单"/>
				<input type="button" class="submit input-button" value="提交订单"/>
			</div>
			<div>
				<label>总计：<font class="money">210</font>￥</label>
			</div>
		</div>
	</div>
	<script src="../js/MyjsV0-5.js"></script>
	<script>
	/*
	待处理:
		地址栏：
			如果地址为空需要输入地址
			使用新的地址（添加新地址）
			使用现有地址
		商品：
			统计总金额
		取消订单：
			提示订单取消，跳回个人页
		提交订单：
			未添加地址信息则提示添加地址信息
			提示下单成功（已添加地址信息），跳转到个人页，并更新信息
	*/
	//初始化
	/*
	addres:[{addre:, id:, }]
	orderList:[{}]
	money:
	*/
	/*
	测试数据
	概述由后台提供
	var jsonObject = new JSONObject() ;

	var jsonArray = new JSONArray() ;

	//商品1信息
	var jsonObject1 = new JSONObject() ; 
	jsonObject1.put("id", "1") ;
	jsonObject1.put("goodsId", "1") ;
	jsonObject1.put("img", "../image/test/tako.jpg") ;
	jsonObject1.put("discount", 0.88) ;
	jsonObject1.put("name", "tako小衣") ;
	jsonObject1.put("color", "绿色") ;
	jsonObject1.put("count", "1") ;
	jsonObject1.put("size", "L") ;
	jsonObject1.put("price", 189) ;
	jsonArray.add(jsonObject1) ;
	//商品2信息
	var jsonObject2 = new JSONObject() ; 
	jsonObject2.put("id", "2") ;
	jsonObject2.put("goodsId", "2") ;
	jsonObject2.put("img", "../image/test/tako1.jpg") ;
	jsonObject2.put("discount", 0.88) ;
	jsonObject2.put("name", "tako小衣") ;
	jsonObject2.put("color", "绿色") ;
	jsonObject2.put("count", "1") ;
	jsonObject2.put("size", "XL") ;
	jsonObject2.put("price", 188) ;
	jsonArray.add(jsonObject2) ;
	jsonObject.put("orderList", jsonArray) ;
	
	//地址信息
	var addresArr = new JSONArray() ;
	var addresObj = new JSONObject() ;
	addresObj.put("id", 2) ;
	addresObj.put("text", "广西省-北海市-银海区") ;
	addresArr.add(addresObj) ;
	jsonObject.put("address", addresArr) ;

	jsonObject.put("money", 377) ; //总金额

	console.log(jsonObject.toString()) ;
	*/
	

	var sendJsonObj = new JSONObject() ;

				


	var jsonData = "" ;				//初始化时的json数据 并且在提交订单时处理再传递向后台只需商品的id（后台将每个商品分类先生成商户订单再生成用户订单
	
	var addressCntHeight = 29 ;		//地址容器的高度
	ajax({
		type:"post",
		url:"member_initSubmitOrdersPage",
		success:function(msg){
			if(isJSON(msg)){
				console.log("初始化数据：" + msg) ;
				var jsonObject = Tokener.parseObject(msg) ;
				//地址
				var addresArr = jsonObject.get("address") ;
				var addreslen = addresArr.length() ;
				addressCntHeight = addreslen*29 ;
				if(addreslen > 0){
					//不为空则列出所有地址以供选择
					for(var i = 0; i < addreslen; i ++){
						var obj = addresArr.getJSONObject(i) ;
						$(".addreedCnt")[0].$("ul")[0].insert(addressMudle(obj)) ;
					}
				}else {
					//如果地址为空 - 提示并可添加
				}

				//订单项
				var goodssArr = jsonObject.get("orderList") ;
				sendJsonObj.put("orderList", goodssArr) ;
				var goodssLen = goodssArr.length() ;
				if(goodssLen > 0){
					for(var i = 0; i < goodssLen; i++){
						var obj = goodssArr.getJSONObject(i) ;
						$(".order-list")[0].$("ul")[0].insert(goodsMudle(obj)) ;
					}
				}else{
					alert("数据异常") ;
				}

				//金额
				$(".money")[0].text(jsonObject.get("money")) ;
			}else alert("数据异常！") ;
		},
		error:function(){
			alert("请求异常") ;
		}
	}) ;
	//地址模板
	function addressMudle (data){
		/*
		put("id", ) ;
		put("text", ) ;
		*/
		return '<li data-id="'+data.get("id")+'"><label><input type="checkbox" /></label><label>'+data.get("text")+'</label></li>' ;
	}
	function goodsMudle (data){
		/*
		put("id", ) ;
		put("img", ) ;
		put("name", ) ;
		put("color", ) ;
		put("count", ) ;
		put("size", ) ;
		put("price", ) ;
		put("merchantId", ) ;
		*/
		return '<li data-id="'+data.get("goodsId")+'">'+
					'<div class="lictn">'+
						'<label class="goodspho">'+
							'<img src="'+data.get("img")+'" width="55" height="60" />'+
						'</label>'+
						'<label class="goodsdes">'+
							'<label class="goods-infor">'+
								'<label class = "goods-name">'+data.get("name")+'</label>'+
								'<label class="goods-color">'+data.get("color")+'</label>'+
								'<label class="goods-num">'+data.get("count")+'</label>'+
								'<label class="goods-size">'+data.get("size")+'</label>'+
								'<label class="goods-price">'+data.get("price")+'</label>'+
							'</label>'+
						'</label>'+
					'</div>'+
				'</li>' ;
	}
	//选择地址的容器打开关闭动画 初始状态为关
	var addressCnt = new AnimateRoutine({
		aniEle:$(".addreedCnt")[0],	//动画元素
		aniMax:addressCntHeight+28,
		type:"bottom",
		closeAll:false,
		aniFlag:false,
		aniTime:8,
	}) ;
	//选择地址
	var isOpen = true ; //当前状态 开
	var isCheck = false ; //是否勾选地址
	var checkIndex  ; //所选中的id
	$(".select-address")[0].onclick = function(e){
		//展开和关闭按钮
		if(e.target.attr("class") == "address-bt"){
			if(isOpen){
				//当前状态 开->关
				isOpen = false ;
				addressCnt.run() ;
			}else{
				//当前状态 关->开
				isOpen = true ;
				addressCnt.next() ;
			}
		}
		//选框按钮
		if(e.target.attr("type") == "checkbox"){
			isCheck = false ;
			if(e.target.checked) {
				var checks = $(".select-address")[0].$("input") ;
				for(var i = 0; i < checks.length; i++) checks[i].checked = false ;
				e.target.checked = true ;
				isCheck = true ;
				isOpen = false ;
				addressCnt.run() ;
				checkIndex = e.target.parent("li").attr("data-id") ;
				$(".address-bt")[0].innerHTML = "查看地址信息" ;
			}
			else $(".address-bt")[0].innerHTML = "请选择地址信息" ;
		}
		if(e.target.attr("class") == "input-button add-address-bt"){
			//点击添加地址信息 弹出小窗口新增地址
			console.log('点击添加地址信息') ;
		}
	}
	
	//图片点击跳转至商品页
	$(".order-list")[0].onclick = function(e){
		if(e.target.tName() == "img"){
			var goodsId = e.target.parent("li").attr("data-id") ;
			ajax({
				type:"post",
				url:"member_lintToGoods",
				data:{data:goodsId},
				success:function(msg){
					window.open('../fonts/商品页.html') ;
				},
				error:function(){
					alert("服务器异常，无法处理跳转。。。。") ;
				}
			}) ;
		}
	}
	//点击提交
	$(".button-cnt")[0].onclick = function(e){
		//取消
		if(e.target.attr("class") == "reset input-button"){
			
		}
		//提交
		if(e.target.attr("class") == "submit input-button"){
			//开始处理数据提交后台
			if(isCheck){
				/*
				console.log("开始处理数据提交后台") ;
				sendJsonObj.put("address", checkIndex) ; //只提交选中的地址ID
				console.log("提交的内容：" + sendJsonObj.toString()) ;
				alert("提交完毕") ;
				*/
				sendJsonObj.put("addresId", checkIndex) ; //只提交选中的地址ID
				console.log(sendJsonObj.toString()) ;
				ajax({
					type:"post",
					url:"member_submitOrders",
					data:{data:sendJsonObj.toString(),},
					success:function(msg){
						alert("ok") ;
					},
					error:function(){
						alert("提交失败") ;
					}
				}) ;
			}else alert("请选择地址信息") ;
		}
	}
	</script>
 </body>
</html>